<template>
    <div class="newsInfo-container">
        <div class="introduction">
            <div class="title">
                <h3>龙凤包子铺</h3>
                <span>时间：</span>
            </div>
            <div class="content">
                皮薄陷多，鲜嫩多汁。 皮薄陷多，鲜嫩多汁。皮薄陷多，鲜嫩多汁。皮薄陷多，鲜嫩多汁。皮薄陷多，鲜嫩多汁。以下省略二千字
            </div>
            <div class="image">
                此为图片区： 没有照片，自行想象
            </div>
        </div>
        <comment-Box :id="this.id" :catId="this.catId"></comment-Box>
    </div>
</template>

<script>
    import comment from '../subComponents/comment.vue';

    export default {
        data() {
            return {
                id:this.$route.params.id,
                catId: this.$route.params.catId,
            }
        },
        created() {
        },
        methods: {

        },
        components: {
            "comment-Box": comment
        }
    }
</script>

<style lang="less" scoped>
    .newsInfo-container {

        .introduction {

            .title {

                h3 {
                    text-align: center;
                }
                span {
                    display: flex;
                    justify-content: flex-end;
                    color: #ccc;
                    font-size: 15px;
                    margin-right: 50px;
                }
            }
            .content {
                font-size:15px;
                text-indent: 2em;
                margin: 5px 3px;
            }
            .image {
                height: 100px;
                line-height: 50px;
            }
        }
    }
</style>